<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>使用Swiper制作webapp菜单栏切换</title>
	<meta name="viewport" content="width=100%; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

	<script src="js/jquery.min.js"></script>
	<!--<script src="//cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js"></script>-->
	<script type="text/javascript" src="js/swiper-3.4.0.jquery.min.js" ></script>
	<!--<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css">-->
	<link rel="stylesheet" href="css/swiper-3.2.7.min.css" />
	<style>
		body {
			min-width: 320px;
			max-width: 640px;
			margin: 0 auto;
			color: #333;
			padding: 0;
			font-family: "Microsoft Yahei";
			text-align: center;
		}
		.container {
			/*width: 100%;*/
			border: 1px solid #ccc;
		}
		.swiper1 {
			width: 100%;
		}
		.swiper1 .selected {
			color: #ec5566;
			border-bottom: 2px solid #ec5566;
		}
		.swiper1 .swiper-slide {
			text-align: center;
			font-size: 16px;
			height: 50px;
			/* Center slide text vertically */
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
			cursor: pointer;
		}
		.swiper2 {
			width: 100%;
		}
		.swiper2 .swiper-slide {
			height: calc(100vh - 50px);
			background-color: #ccc;
			color: #fff;
			text-align: center;
			box-sizing: border-box !important;
			overflow-x: hidden !important;
		}
		.img-pu{max-width: 100%; height:100px; background-image:url("https://caiyun.001023.com/public/uploads/20170602/268ca049497a0d4a51acc9b580357e56.jpg");background-repeat:no-repeat;background-size:100% auto;}
		.swiper-container{
			width:100%;
			height:100%;
		}
		.tabs{
			width:100%;
			height: 85px;
			line-height: 85px;
			overflow-y: hidden;
		}
		.tab_nav{
			/*display:-moz-box;*/
			/*display:-webkit-box;*/
			/*display:box;*/
			/*width:100%;*/
			background:#fff;
			border-bottom:1px solid #ddd;
			width: 1100px;
			line-height: 40px;
			height: 85px;
			overflow: auto;
			padding-left: 10px;
		}
		.tab_nav li{
			display: inline-block;
			color:#818181;
			text-align:center;
			/*-moz-box-flex:1;*/
			/*-webkit-box-flex:1;*/
			/*box-flex:1;*/
			list-style:none;
			opacity:1;
			background:none;
			width:60px;
			border-radius:0;;
			font-size:14px;
			float: left;
			border: none !important;
		}
		.tab_nav .active{
			/*border-bottom:1px solid #ff6c00;*/
			font-size:16px;
			color:#ff6c00;
			/*box-sizing: border-box;*/
			/*-moz-box-sizing: border-box;*/
		}
		.weui-grid__label {
			overflow: unset;
		}
		.weui-grid{
			width: 50px;
			box-sizing: inherit;
			padding: 5px;
			padding-top: 10px;

		}
		.weui-grid__icon+.weui-grid__label{
			margin-top: -5px;
		}
		.weui-grid:after, .weui-grid:before {
			content: " ";
			position: absolute;
			right: 0;
			bottom: 10px;
			color: #d9d9d9;
		}
		.weui-cell{
			padding: 5px 15px;
		}
	</style>
</head>
<body>
		<div class="container">
			<div class="swiper-container swiper1">
				<div class="swiper-wrapper">
					<div class="swiper-slide selected">推荐</div>
					<div class="swiper-slide">菜单 2</div>
					<div class="swiper-slide">菜单 3</div>
					<div class="swiper-slide">菜单 4</div>
					<div class="swiper-slide">菜单 5</div>
					<div class="swiper-slide">菜单 6</div>
					<div class="swiper-slide">菜单 7</div>
					<div class="swiper-slide">菜单 8</div>
					<div class="swiper-slide">菜单 9</div>
					<div class="swiper-slide">菜单 10</div>
				</div>
			</div>
			<!-- swiper2 -->
			<div class="swiper-container swiper2">
				<div class="swiper-wrapper">
					<div class="swiper-slide swiper-no-swiping">
						<div style="width: 100%;height: 100%;background-color: gainsboro;">上面导航栏可以滑动</div>
					</div>
					<div class="swiper-slide swiper-no-swiping">11111111111111111</div>
					<div class="swiper-slide swiper-no-swiping">222222222</div>
					<div class="swiper-slide swiper-no-swiping">内容 ressssssss</div>
					<div class="swiper-slide swiper-no-swiping">内容 ffffffffffff</div>
					<div class="swiper-slide swiper-no-swiping">内容 bbbbbbbbbbbbbbbbbvb</div>
					<div class="swiper-slide swiper-no-swiping">内容 bvcccccccccccbvb</div>
					<div class="swiper-slide swiper-no-swiping">内容 sdasdssssss</div>
					<div class="swiper-slide swiper-no-swiping">内容 oiouiouioiuoiuo</div>
					<div class="swiper-slide swiper-no-swiping">内容 m,jnkjhkhgjghjugh</div>
				</div>
			</div>

		</div>

		<script>
			$(function() {
				function setCurrentSlide(ele, index) {
					$(".swiper1 .swiper-slide").removeClass("selected");
					ele.addClass("selected");
					//swiper1.initialSlide=index;
				}

				var swiper1 = new Swiper('.swiper1', {
//					设置slider容器能够同时显示的slides数量(carousel模式)。
//					可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
//					loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
					slidesPerView: 5.5,
					paginationClickable: true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
					spaceBetween: 10,//slide之间的距离（单位px）。
					freeMode: true,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
					loop: false,//是否可循环
					onTab: function(swiper) {
						var n = swiper1.clickedIndex;
					}
				});
				swiper1.slides.each(function(index, val) {
					var ele = $(this);
					ele.on("click", function() {
						setCurrentSlide(ele, index);
						swiper2.slideTo(index, 500, false);
						//mySwiper.initialSlide=index;
					});
				});

				var swiper2 = new Swiper('.swiper2', {
					//freeModeSticky  设置为true 滑动会自动贴合  
					direction: 'horizontal',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
					loop: false,
//					effect : 'fade',//淡入
					//effect : 'cube',//方块
					//effect : 'coverflow',//3D流
//					effect : 'flip',//3D翻转
					autoHeight: true,//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
					onSlideChangeEnd: function(swiper) {  //回调函数，swiper从一个slide过渡到另一个slide结束时执行。
						var n = swiper.activeIndex;
						setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
						swiper1.slideTo(n, 500, false);
					}
				});
			});
		</script>
</body>
</html>